<template>
	<view class="content">
		<view class="title" text style="font-size: 50rpx; display: block; text-align: center; margin-bottom: 20rpx;">子组件B
		</view>
		<view class="b_box" style="display: flex; align-items: center; gap: 8rpx;">
			<text>CompA组件传进来的值：</text>
			<input type="text" v-model="result" style="flex: 1;" />
		</view>
		<view class="b_box" style="margin: 10rpx; display: flex; align-items: center;">
			<text style="margin-right: 10rpx;">回传值：</text>
			<input type="text" v-model="callbackValue"
				style="color: yellow; background: #ccc; flex: 1; margin-right: 10rpx;" />
			<button @click="sendOutside()" size="mini" type="default">回传</button>
		</view>
	</view>
</template>

<script>
	export default {
		name: "compB",
		data() {
			return {
				result: '',
				callbackValue: ''
			};
		},
		created() {
			uni.$on('getIntent', (msg) => {
				this.result = msg;
			});
		},
		methods: {
			sendOutside() {
				this.$emit('callBackFun', this.callbackValue);
			}
		}
	};
</script>

<style>
	.content {
		background-color: lightgreen; 
		padding: 30rpx 20rpx; 
		margin: 20rpx 0;
		border-radius: 8rpx;
	}

	.b_box {
		margin: 20rpx 0;
	}

	input {
		padding: 10rpx;
		border: none;
		border-radius: 4rpx;
	}
</style>